<template>
  <div>
    <!-- 新增图标 -->
    <svg-icon icon-class="messages" @click="changeDialog" />

    <!-- 消息 -->
    <el-dialog :title="title" :visible.sync="showDialog" append-to-body>
      <el-tabs tab-position="left" style="height: 500px;">
        <el-tab-pane label="未读消息">

          <el-table :data="channelData" :stripe="true">

            <el-table-column type="index" label="序号" width="60"></el-table-column>

            <el-table-column property="title" label="消息标题"></el-table-column>
            <el-table-column property="mtype" label="消息分类" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.gxh_message_type" :value="scope.row.mtype"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column property="createdate" label="创建日期" width="100"></el-table-column>
            <el-table-column property="createtime" label="创建时间" width="160"></el-table-column>
            <el-table-column property="mfrom" label="消息来源" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.gxh_message_resource" :value="scope.row.mfrom"></dict-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="160" align="center">
              <el-tooltip class="item" effect="dark" content="设为已读" placement="bottom-start">
                <el-button type="text" size="mini" icon="el-icon-view"></el-button>
              </el-tooltip>
            </el-table-column>

          </el-table>

          <!-- 分页 -->
          <el-pagination style="margin-top: 10px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryParams.pageno" :page-size="queryParams.pagesize" :total="total" layout="->, total, sizes, prev, pager, next, jumper" :page-sizes='pageSizes'>
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="邮件通知">邮件通知</el-tab-pane>
      </el-tabs>
    </el-dialog>

  </div>
</template>

<script>
import messageApi from "@/api/gxh/message";

export default {
  name: "NineMsg",
  dicts: ["gxh_message_type", "gxh_message_resource"],
  data() {
    return {
      // 是否显示消息框
      showDialog: false,
      title: "消息中心",
      queryParams: {
        pageno: 1,
        pagesize: 10,
        title: "",
      },
      // 总条数
      total: 0,
      channelData: [],
      // 下拉分页数，需配合layout中sizes使用
      pageSizes: [2, 10, 20, 50, 100],
    };
  },
  mounted() {
    this.listpage();
  },
  methods: {
    listpage() {
      let { pageno, pagesize } = this.queryParams;
      messageApi.listpage(pageno, pagesize, this.queryParams).then((res) => {
        this.channelData = res.data.records;
        this.total = res.data.total;

        console.log("111111111111111111111111{}");

        this.$store.dispatch('messages/updateUnReadMsgCount', this.total);

      });
    },
    changeDialog() {
      this.showDialog = true;
    },
    // 每页条数变化
    handleSizeChange(pagesize) {
      this.queryParams.pagesize = pagesize;
      this.listpage();
    },
    // 当前页发生变化
    handleCurrentChange(pageno) {
      this.queryParams.pageno = pageno;
      this.listpage();
    },
  },
};
</script>
<style scoped>
.el-badge__content.is-fixed {
  top: 10px;
  right: 15px;
}
</style>